<template>
  <nav class="py-2 bg-white">
    <el-row v-for="item in Category" :key="item" class="pointer">
      <!-- 一级分类 -->
      <el-col :span="8"  class="py-3" @click="toList(item.cid)">{{ item.name }}<span class="divider">|</span></el-col>
      <!-- 二级分类 -->
      <el-col :span="5" class="py-3" v-for="(subItem,index) in SubCategory(item.cid)" :key="index" @click="toList(subItem.cid)">
        {{ subItem.name }}<span v-if="index!=SubCategory(item.cid).length-1">/</span>
      </el-col>
    </el-row>
  </nav>
</template>

<script setup>
  import { defineProps,computed } from "vue"  
  import { useRouter } from "vue-router"
  const router = useRouter()
  const props = defineProps({               //使用defineProps替代props
    category:{
      type:[]
    }
  })
  let toList = (cid) =>{
    router.push({path:"/list",query:{cid:cid}} )
  }
  const Category = computed(()=>{
    let temp = []
    let j=0
    for(let i in props.category) {
        if (props.category[i].pid==="0") {
            temp[j++] = props.category[i]
        }
    }
    console.log(props.category)
    return temp
  })
  const SubCategory = computed(()=>(cid)=>{
    let temp = []
    let j=0
    for(let i in props.category) {
        if (props.category[i].pid===cid) {
            temp[j++] = props.category[i]
        }
    }
    return temp
  })
</script>

<style scoped>
</style>



